<template>
  <div style="padding-top:1.5rem;text-align: left">
    <TopNav title="ChouHisPage.cjls" show_left="true"></TopNav>
    <div style="text-align: center;" v-if="loading">
      <van-loading v-if="loading"/>
    </div>
    <div v-else>
      <div v-if="data.length>0" class="data-list">
        <ul>
          <li v-for="item in data">{{item.text}} <span style="float:right;">{{item.when}}</span></li>
        </ul>
        <div style="text-align: center;margin-top:0.4rem;font-size:0.4rem;">$t('ChouHisPage.sjxszj')50$t('ChouHisPage.tjl')</div>
      </div>
      <div v-else>
        <EmptyBox/>
      </div>
    </div>

  </div>
</template>

<script>
import TopNav from "../components/TopNav";
import EmptyBox from "../components/EmptyBox";

export default {
  name: 'ChouPage',
    components: {
      EmptyBox,
      TopNav
    },
    data () {
    return {
        loading: false,
        data: [],
    }
  },
    methods:{
        getData(){
            this.loading = true;
            this.$axios.get(this.$api_url.get_choujiang_records).then((res)=>{
                this.data = res.data;
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
                this.loading = false;
            });
        }
    },
    mounted() {
        this.getData();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .data-list ul li {
    font-size: 0.5rem;
    padding: 0.1rem 0.2rem;
    border-bottom: thin dashed #ccc;
  }
</style>
